<template>
  <div>
<!--    <div class="hidden">-->
<!--      <vs-sidebar-->
<!--        absolute-->
<!--        reduce-->
<!--        right-->
<!--        :background="myColor"-->
<!--        open-->
<!--      >-->
<!--&lt;!&ndash;        <template #logo>&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash; ...img logo &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--        <vs-sidebar-item id="">-->
<!--          <template #icon>-->
<!--            <i class='bx bx-home'></i>-->
<!--          </template>-->
<!--        </vs-sidebar-item>-->
<!--      </vs-sidebar>-->
<!--    </div>-->
    <vs-navbar shadow-scroll fixed center-collapsed not-line>
      <template #left>
        <vs-button flat icon style="margin-right: 20px" class="menu-btn" @click="activeSidebar = !activeSidebar">
          <i class='bx bx-menu'></i>
        </vs-button>
        <router-link to="/" class="navbar-link">
          <vs-avatar size="40" circle style="margin-top: 10px">
            <img
              src="https://www.duanqing.online:9000/blog/logo.png"
            >
          </vs-avatar>
        </router-link>
      </template>
      <vs-navbar :color=myColor v-model="active"   target-scroll="#padding-scroll-content" padding-scroll  id="vsNavbarId">
            <vs-navbar-item
              v-for="(link, index) in links"
              :key="index"
              :active="active.name === link.name"
              :to="active.name === link.name ? null : link.url"
              style="padding: 4px"
            >
              <vs-tooltip bottom>
                <vs-button gradient size="mini" style="margin: -3px">
                  {{ link.name }}
                </vs-button>
                <template #tooltip>
                  <div class="content-tooltip">
                    <h4>
                      {{link.linkName}}
                    </h4>
                  </div>
                </template>
              </vs-tooltip>
            </vs-navbar-item>
        <template #right>
          <vs-button @click="authorization_code_login" circle size="mini" v-show="token==null||token===undefined" border ><i class="bx bx-log-in-circle"></i></vs-button>
<!--          <vs-button @click="getColor" border size="mini" style="font-size: 10px"><i class="bx bx-font-color"></i></vs-button>-->
          <vs-switch
            style="height: 20px;width: 10px"
            @click="changeTheme()"
          >
            <template #off>
              <i class='bx bxs-sun'></i>
            </template>
            <template #off>
              <i class='bx bxs-moon'></i>
            </template>
          </vs-switch>
        </template>
        <vs-button flat icon style="margin-right: 20px" class="menu-btn" @click="activeSidebar = !activeSidebar">
          <i class='bx bx-menu'></i>
        </vs-button>
        <template #left>
          <router-link to="/" class="navbar-link">
            <vs-avatar size="40" circle style="margin-top: 10px">
              <img
                src="https://www.duanqing.online:9000/blog/logo.png"
              >
            </vs-avatar>
          </router-link>
        </template>
      </vs-navbar>
      <template #right>
        <vs-navbar-item>
          <vs-switch
            @click="changeTheme()"
          >
            <template #off>
                <i class='bx bxs-sun'></i>
            </template>
            <template #off>
              <i class='bx bxs-moon'></i>
            </template>
          </vs-switch>
        </vs-navbar-item>
<!--        <a-icon type="user" v-show="token!==null&&token!==undefined"></a-icon>-->
        <vs-button  v-show="token!==null&&token!==undefined" floating color="#ff3e4e" style="margin-top: 10px" @click="checkLoginInfo">
          <i class='bx bxs-user'></i>
        </vs-button>
      </template>
    </vs-navbar>
      <vs-sidebar
        v-model="activeItem"
        :open.sync="activeSidebar"
      >
        <template #logo>
          <h3>{{ homeInfo.blogTitle }}</h3>
        </template>
        <vs-sidebar-item
          v-for="(link, index) in links"
          :key="index"
          :to="link.url"
          :id="link.name"
        >
          {{ link.name }}
        </vs-sidebar-item>
      </vs-sidebar>
    <div style="margin-bottom: 100px"></div>
    <vs-dialog v-model="active" width="200px">
      <div  style="display: flex">
        <template>
          <vs-button color="tumblr" @click="giteeLogin">
            <i class='bx bxl-tumblr'></i>
          </vs-button>
          <vs-button color="youtube" @click="mail_QQ_Login">
            <i class='bx bxl-gmail'></i>
          </vs-button>
        </template>
      </div>
      <p>请使用以上方式登录</p>
    </vs-dialog>
    <vs-dialog v-model="visCheckOutLoginInfo" width="200px">
      <div  >
        <template>
          <p>用户邮箱</p>
          <p>{{currentLoginInfo.qqMailUser}}</p>
        </template>
      </div>
    </vs-dialog>
    <vs-dialog v-model="visQQLogin" width="200px" prevent-close>
      <template #header>
        <h4 class="not-margin">
          QQ邮箱登录 <b></b>
        </h4>
      </template>
      <div class="con-form">
        <vs-input v-model="mailLoginQQ.qqMailUser" placeholder="Email">
          <template #icon>
            @
          </template>
        </vs-input>
        <div class="flex" v-if="visQQRegister">
          <vs-input v-model="mailLoginQQ.code" placeholder="验证码" style="width: 82%">
            <template #icon>
              code
            </template>
          </vs-input>
          <vs-button @click="qqCodeSend()">验证码</vs-button>
        </div>
        <vs-input type="password" v-model="mailLoginQQ.password" placeholder="Password">
          <template #icon>
            <i class='bx bxs-lock'></i>
          </template>
        </vs-input>
        <div class="flex">
          <a href="#">忘记密码?</a>
          <vs-button @click="visQQRegister=!visQQRegister">
            <p v-if="visQQRegister">登录</p>
            <p v-else>注册</p>
          </vs-button>
        </div>
      </div>
      <template #footer>
        <div class="footer-dialog">
          <vs-button block @click="mail_QQ_Login_Submit">
            <p v-if="visQQRegister">注册</p>
            <p v-else>登录</p>
          </vs-button>
        </div>
      </template>
    </vs-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios'

let Config = null
try {
  Config = require('@/../posts/data/config.json')
} catch (e) {
  Config = require('@/defaults/config.json')
}

export default {
  name: 'Navbar',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    // eslint-disable-next-line vue/no-unused-components
  },
  data: () => {
    return {
      verifyFlag: false,
      active: false,
      activeVs: '主页',
      visQQLogin: false,
      visCheckOutLoginInfo: false,
      visQQRegister: false,
      token: null,
      currentLoginInfo: {
        qqMailUser: null
      },
      homeInfo: {},
      config: Config.config,
      activeItem: 'Home',
      activeSidebar: false,
      myColor: '',
      dark: false,
      mailLoginQQ: {
        qqMailUser: null,
        password: null,
        code: null
      },
      links: [
        {
          name: 'H',
          url: '/',
          linkName: '主页'
        },
        {
          name: 'P',
          url: '/posts',
          linkName: '资料'
        },
        {
          name: 'O',
          url: '/projects',
          linkName: '项目'
        },
        {
          name: 'C',
          url: '/count',
          linkName: '统计'
        },
        {
          name: 'M',
          url: '/leaveMessage',
          linkName: '留言'
        },
        {
          name: 'S',
          url: '/service',
          linkName: '服务'
        },
        {
          name: 'Y',
          url: '/poetry',
          linkName: '诗词'
        },
        {
          name: 'M',
          url: '/about',
          linkName: '我'
        }
      ]
    }
  },
  beforeCreate () {
    // if (Cookies.get('homeInfo') === undefined) {
    //   this.getHomeInfo()
    //   console.log(Cookies.get('homeInfo'))
    //   this.homeInfo = JSON.parse(Cookies.get('homeInfo'))
    // }
  },
  created () {
    if (Cookies.get('Authorization') !== undefined && Cookies.get('Authorization') !== null) {
      this.token = Cookies.get('Authorization')
    }
    // this.getToken()
  },
  async mounted () {
    if (Cookies.get('homeInfo') !== undefined && Cookies.get('homeInfo') !== null) {
      this.homeInfo = JSON.parse(Cookies.get('homeInfo'))
    }
    if (Cookies.get('Authorization') === undefined || Cookies.get('Authorization') == null) {
      if (this.$route.query.token === undefined || this.$route.query.token == null) {
        this.token = null
      } else {
        await this.verifyToken(this.$route.query.token)
        if (this.verifyFlag) {
          Cookies.set('Authorization', this.$route.query.token)
          this.token = this.$route.query.token
          this.currentLoginInfo = Cookies.get('UserInfo')
        } else {
          this.$vs.notification({
            progress: 'auto',
            title: '哇哦',
            position: 'top-left',
            color: 'danger',
            text: '请登录'
          })
        }
      }
    } else {
      this.token = Cookies.get('Authorization')
      this.currentLoginInfo = JSON.parse(Cookies.get('UserInfo'))
    }
    axios.interceptors.request.use(function (config) {
      // const data = res.data.data
      config.headers.Authorization = Cookies.get('Authorization')
      axios.defaults.xsrfCookieName = 'XSRF-TOKEN'
      axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'
      return config
    })
  },
  methods: {
    getColor () {
      let color = '#'
      for (let i = 0; i < 6; i++) {
        color += (Math.random() * 16 | 0).toString(16)
      }
      this.myColor = color
      document.getElementById('vsNavbarId').style.color = this.myColor
      return color
    },
    getHomeInfo () {
      return axios({
        url: '/api/blog/homeInfo/load/1',
        method: 'post'
      }).then(async (res) => {
        this.homeInfo = JSON.parse(res.data.data)
        Cookies.set('homeInfo', JSON.stringify(this.homeInfo))
        // console.log(this.homeInfo)
      })
    },
    changeTheme: function () {
      if (this.dark) {
        document.getElementsByTagName('body')[0].setAttribute('vs-theme', 'light')
        this.dark = false
      } else {
        document.getElementsByTagName('body')[0].setAttribute('vs-theme', 'dark')
        this.dark = true
      }
    },
    authorization_code_login: function () {
      this.active = !this.active
    },
    giteeLogin: function () {
      window.open('https://gitee.com/oauth/authorize?client_id=23dd00fc01ac38da6e46e5fed3a2e57477eed923d2d4c64298de88bd65d80044&redirect_uri=https%3A%2F%2Fwww.duanqing.online%2Fapi%2Fblog%2Fapi%2Fgitee%2FgiteeCallBack&response_type=code')
    },
    mail_QQ_Login: function () {
      this.formRest()
      this.visQQLogin = !this.visQQLogin
    },
    mail_QQ_Login_Submit: function () {
      if (this.visQQRegister) {
        if (this.mailLoginQQ.qqMailUser === '' ||
          this.mailLoginQQ.password === '' ||
          this.mailLoginQQ.password === null ||
          this.mailLoginQQ.code === null ||
          this.mailLoginQQ.password.length < 10) {
          this.$vs.notification({
            progress: 'auto',
            title: '哇哦',
            position: 'top-left',
            color: 'danger',
            text: '请填写完整或密码太短'
          })
        } else {
          axios({
            url: '/api/blog/mailLogin/register?mailUserName=' + this.mailLoginQQ.qqMailUser + '&password=' + this.mailLoginQQ.password + '&validateCode=' + this.mailLoginQQ.code,
            method: 'post'
          }).then(async (res) => {
            if (res.data.resp_code === 0) {
              this.$vs.notification({
                progress: 'auto',
                title: '',
                position: 'top-left',
                color: 'success',
                text: '欢迎'
              })
              this.token = res.data.data.qqMailUser
              Cookies.set('Authorization', res.data.data.qqMailUser)
              Cookies.set('UserInfo', res.data.data)
              // console.log(Cookies.get('UserInfo'))
              if (Cookies.get('userInfo') !== undefined && Cookies.get('userInfo') !== null) {
                this.currentLoginInfo = JSON.parse(Cookies.get('userInfo'))
              }
              axios.interceptors.request.use(function (config) {
                // const data = res.data.data
                config.headers.Authorization = Cookies.get('Authorization')
                axios.defaults.xsrfCookieName = 'XSRF-TOKEN'
                axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'
                return config
              })
            } else {
              this.$vs.notification({
                progress: 'auto',
                title: '',
                position: 'top-left',
                color: 'danger',
                text: res.data.resp_msg
              })
            }
            this.visQQRegister = !this.visQQRegister
            this.visQQLogin = !this.visQQLogin
            this.active = !this.active
          })
        }
      } else {
        if (this.mailLoginQQ.qqMailUser === '' ||
          this.mailLoginQQ.password === '' ||
          this.mailLoginQQ.password === null ||
          this.mailLoginQQ.password.length < 10) {
          this.$vs.notification({
            progress: 'auto',
            title: '哇哦',
            position: 'top-left',
            color: 'danger',
            text: '请填写完整或密码太短'
          })
        } else {
          axios({
            url: '/api/blog/mailLogin/login',
            method: 'post',
            data: this.mailLoginQQ
          }).then(async (res) => {
            if (res.data.resp_code === 0) {
              this.token = res.data.data.qqMailUser
              Cookies.set('Authorization', res.data.data.qqMailUser)
              Cookies.set('UserInfo', res.data.data)
              this.currentLoginInfo = JSON.parse(Cookies.get('UserInfo'))
              axios.interceptors.request.use(function (config) {
                // const data = res.data.data
                config.headers.Authorization = Cookies.get('Authorization')
                axios.defaults.xsrfCookieName = 'XSRF-TOKEN'
                axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'
                return config
              })
              this.visQQLogin = !this.visQQLogin
              this.active = !this.active
            } else {
            }
            this.$vs.notification({
              progress: 'auto',
              title: '',
              position: 'top-left',
              color: 'success',
              text: res.data.resp_msg
            })
          })
        }
      }
    },
    qqCodeSend: function () {
      return axios({
        url: '/api/blog/mailLogin/sendCode?qqMailUser=' + this.mailLoginQQ.qqMailUser,
        method: 'post'
      }).then(async (res) => {
        if (res.data.resp_code === 0) {
          this.$vs.notification({
            progress: 'auto',
            title: '',
            position: 'top-left',
            color: 'success',
            text: res.data.resp_msg
          })
        } else {
          this.$vs.notification({
            progress: 'auto',
            title: '',
            position: 'top-left',
            color: 'danger',
            text: res.data.resp_msg
          })
        }
      })
    },
    formRest: function () {
      this.mailLoginQQ.qqMailUser = null
      this.mailLoginQQ.password = null
      this.mailLoginQQ.code = null
    },
    verifyToken: function (token) {
      return axios({
        url: '/api/blog/verify/verifyToken?code=' + token,
        method: 'get'
      }).then(async (res) => {
        if (res.data.resp_code === 0) {
          this.verifyFlag = true
          Cookies.set('UserInfo', res.data.data)
        } else {
          this.verifyFlag = false
        }
      })
    },
    checkLoginInfo: function () {
      this.visCheckOutLoginInfo = !this.visCheckOutLoginInfo
    }
  },
  watch: {
    'mailLoginQQ.qqMailUser': function (v1, v2) {
      if (v1 !== null && v1.length > 30) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '你的邮箱有点长~~~,换个个性的名字试试'
        })
        this.mailLoginQQ.qqMailUser = this.mailLoginQQ.qqMailUser.substring(0, 20)
      }
    },
    'mailLoginQQ.password': function (v1, v2) {
      if (v1 !== null && v1.length > 30) {
        this.$vs.notification({
          progress: 'auto',
          title: '哇哦',
          position: 'top-left',
          color: 'danger',
          text: '你的密码有点长~~~,换个个性的名字试试'
        })
        this.mailLoginQQ.password = this.mailLoginQQ.password.substring(0, 20)
      }
    }
  },
  computed: {
    active: function () {
      const cur = this.$route.path
      var ret = {
        name: null,
        url: null
      }
      for (var i = 0; i < this.links.length; i++) {
        if (this.links[i].url === cur) ret = this.links[i]
      }
      return ret
    }
  }
}
</script>
<style>
/*.vs-dialog__content {*/
/*  display: flex;*/
/*}*/
</style>
